<link rel="stylesheet" href="../src/css/pages/adMarketTarget.css">
<div class="fmp-container">
    <div class="container-fluid">
        <div class="row" id="search-area" style="padding-bottom: 12px;margin-top: 20px;">
            <div class="col-sm-2 no-margin">
                <a href="javascript:void(0)" class="btn btn-primary btn-sm btn-pauseAd" id="add-dpa-market-target-btn">
                    <i class="icon-search"></i>{{i18n-createDPA}}
                </a>
            </div>
        </div>
        <div class="conditions-table">
            <table class="smart-form" list-manager="marketTargetList">
                <thead>
                    <tr>
                        <th th-name="name">{{i18n-marketName}}</th>
                        <th th-name="marketProduct">{{i18n-marketProduct}}</th>
                        <th th-name="dayBudget" valign="middle">{{i18n-targetDailyBudget}}</th>
                        <th th-name="targetRoi">{{i18n-targetRoi}}</th>
                        <th th-name="todayCost">{{i18n-todaySpent}}</th>
                        <th th-name="todayFbRoi">{{i18n-todayFbRoi}}</th>
                        <th th-name="yesterdayCost">{{i18n-yesSpent}}</th>
                        <th th-name="yesterdayGaRoi">{{i18n-yestodayGaRoi}}</th>
                        <th th-name="yesterdayFbRoi">{{i18n-yestodayFbRoi}}</th>
                        <th th-name="total">{{i18n-spent}}</th>
                        <th th-name="gaRoi">{{i18n-averageGaRoi}}</th>
                        <th th-name="fbRoi">{{i18n-averageFbRoi}}</th>
                        <th th-name="status">{{i18n-status}}</th>
                        <th th-name="createTime">{{i18n-createTime}}</th>
                        <th th-name="operation">{{i18n-operate}}</th>
                    </tr>
                </thead>
                <tbody id="marketTarget-grid">
                </tbody>
            </table>

        </div>
    </div>
</div>

<div class="modal fade dialog-create-market-target" role="dialog" id="dialog-create-market-target">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{i18n-createDPA}}</h4>
            </div>
            <div class="modal-body">

                <div class="mt-15">
                    <label>{{i18n-name}}:</label>
                    <input id="market-name" name="market-name" class="mk-pixel-id" />
                </div>
                <br>

                <div class="mt-15">
                    <label>{{i18n-marketFeed}}:</label>
                    <div class="c-select-container">
                        <select id="market-feed" name="market-feed" style="width:100%">
                        </select>
                    </div>
                </div>
                <br>
                <div class="mt-15">
                    <label>{{i18n-targetCountry}}:</label>
                    <div class="c-select-container">
                        <select id="target-country" name="target-country" style="width:100%">
                        </select>
                    </div>
                </div>
                <br>
                <div class="mt-15">
                    <label>{{i18n-dailyBudgetC}}:</label>
                    <input id="dayBudget" name="dayBudget" class="mk-pixel-id" />
                    <span>$</span>
                </div>
                <div class="mt-15">
                    <label><i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{i18n-datatooltip}}"></i> {{i18n-data}} :</label>
                    <div style="margin-left: 20px;width: 450px;float: right;">
                        <input type="radio" id="ga-roi" name="optimizeType" class="form-input" value="gaRoi" checked>
                        <label for="ga-roi"  style="width:130px;text-align: left;">
                            <span class="radio-dot"></span>
                            {{i18n-gaData}}
                        </label>
                        <input type="radio" id="roi-fb" name="optimizeType" class="form-input" value="roi">
                        <label for="roi-fb"  style="width:130px;text-align: left;">
                            <span class="radio-dot"></span>
                            {{i18n-fbData}}
                        </label>
                    </div>
                </div>
                <div class="mt-15">
                    <label>{{i18n-placement}}</label>
                    <div style="margin-left: 20px;width: 450px;float: right;">
                        <input type="checkbox" id="pageType-desktopfeed" name="pageType" value="desktopfeed" class="form-input">
                        <label for="pageType-desktopfeed" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-pcFeed}}
                        </label>
                        <input type="checkbox" id="pageType-mobilefeed" name="pageType" value="mobilefeed" class="form-input">
                        <label for="pageType-mobilefeed" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-mobileFeed}}
                        </label>
                        <input type="checkbox" id="pageType-rightcolumn" name="pageType" value="rightcolumn" class="form-input">
                        <label for="pageType-rightcolumn" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-rightColumn}}
                        </label>
                        <br>
                        <input type="checkbox" id="pageType-mobileexternal" name="pageType" value="mobileexternal" class="form-input">
                        <label for="pageType-mobileexternal" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-audienceNetwork}}
                        </label>
                        <input type="checkbox" id="pageType-instagramstream" name="pageType" value="instagramstream" class="form-input">
                        <label for="pageType-instagramstream" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-insatagram}}
                        </label>
                    </div>
                </div>
                <br>
                <br>
                <div class="mt-15">
                    <label>{{i18n-roiC}}:</label>
                    <input id="roi" name="roi" class="mk-pixel-id" />
                </div>
            </div>
            <div class="modal-footer">
                <button id="add-marketTargetButton" type="button" class="btn btn-primary" commit>{{i18n-confirm}}</button>
                <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancel}}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade dialog-update-market-target" role="dialog" id="dialog-update-market-target">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{i18n-modifyDPA}}</h4>
            </div>
            <div class="modal-body">
                <div class="mt-15">
                    <label>{{i18n-marketFeed}}:</label>
                    <div class="c-select-container">
                        <select id="update-market-feed" name="market-feed" style="width:100%">
                        </select>
                    </div>
                </div>
                <div class="mt-15">
                    <label>{{i18n-targetCountry}}:</label>
                    <div class="c-select-container">
                        <select id="update-target-country" name="target-country" style="width:100%">
                        </select>
                    </div>
                </div>
                <div class="mt-15" id="mk-pixel-id">
                    <label>{{i18n-dailyBudgetC}}:</label>
                    <input id="update-dayBudget" name="dayBudget" class="mk-pixel-id" />
                    <span>$</span>
                </div>
                <div class="mt-15">
                    <label><i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{i18n-datatooltip}}"></i> {{i18n-data}} :</label>
                    <div style="margin-left: 20px;width: 450px;float: right;">
                        <input type="radio" id="update-ga-roi" name="update-optimizeType" class="form-input disabled" value="gaRoi" disabled>
                        <label for="update-ga-roi disabled"  style="width:130px;text-align: left;">
                            <span class="radio-dot"></span>
                            {{i18n-gaData}}
                        </label>
                        <input type="radio" id="update-roi-fb" name="update-optimizeType" class="form-input disabled" value="roi" disabled>
                        <label for="update-roi-fb disabled"  style="width:130px;text-align: left;">
                            <span class="radio-dot"></span>
                            {{i18n-fbData}}
                        </label>
                    </div>
                </div>
                <div class="mt-10">
                    <label>{{i18n-placement}}</label>
                    <div style="margin-left: 20px;width: 450px;float: right;">
                        <input type="checkbox" id="update-pageType-desktopfeed" name="update-pageType" value="desktopfeed" class="form-input disabled" disabled>
                        <label for="update-pageType-desktopfeed" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-pcFeed}}
                        </label>
                        <input type="checkbox" id="update-pageType-mobilefeed" name="update-pageType" value="mobilefeed" class="form-input disabled" disabled>
                        <label for="update-pageType-mobilefeed" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-mobileFeed}}
                        </label>
                        <input type="checkbox" id="update-pageType-rightcolumn" name="update-pageType" value="rightcolumn" class="form-input disabled" disabled>
                        <label for="update-pageType-rightcolumn" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-rightColumn}}
                        </label>
                        <br>
                        <input type="checkbox" id="update-pageType-mobileexternal" name="update-pageType" value="mobileexternal" class="form-input disabled" disabled>
                        <label for="update-pageType-mobileexternal" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-audienceNetwork}}
                        </label>
                        <input type="checkbox" id="update-pageType-instagramstream" name="update-pageType" value="instagramstream" class="form-input disabled" disabled>
                        <label for="update-pageType-instagramstream" style="width:140px;text-align: left;">
                            <span class="checkbox-mark"></span>
                            {{i18n-insatagram}}
                        </label>
                    </div>
                </div>
                <br>
                <br>
                <div class="mt-15">
                    <label>{{i18n-roiC}}:</label>
                    <input id="update-roi" name="roi" class="mk-pixel-id" />
                </div>
            </div>
            <div class="modal-footer">
                <button id="update-marketTargetButton" type="button" class="btn btn-primary" commit>{{i18n-confirm}}</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancel}}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade dialog-update-market-target" role="dialog" id="dialog-pause-market-target">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{i18n-stopDPA}}</h4>
            </div>
            <div class="modal-body">
                <div class="mt-15">
                    <label>{{i18n-stopReason}}</label>
                    <div class="c-select-container">
                        <select id="pause-reason" name="market-feed" style="width:100%">
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="pause-marketTargetButton" type="button" class="btn btn-primary" commit>{{i18n-confirm}}</button>
                <button id="" type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancel}}</button>
            </div>
        </div>
    </div>
</div>